<!-- eslint-disable max-len -->
<template>
    <div class="loginpage">
      <div class="bg"></div>
      <div class="loginzone">
        <div class="loginbox">
          <el-form :model="userinfo"
          label-position="top"
          size="large"
          :rules="rules"
          ref="myForm"
          >
          <el-form-item  label="用户名" label-width="100px" prop="uname">
            <el-input placeholder="请填写你的用户名" clearable v-model="userinfo.uname">
              <template #prefix>
                <i class="iconfont icon-icon-test1"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="100px" prop="pwd">
            <el-input
              type="password"
              placeholder="不用我告诉你吧" v-model="userinfo.pwd" show-password>
              <template #prefix>
                <i class="iconfont icon-icon-test"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码" label-width="100px" prop="code">
            <el-row style="width:400px">
              <el-col :span="16">
                <el-input  placeholder="输入6位验证码" v-model="userinfo.code" maxlength="6">
                  <template #prefix>
                    <i class="iconfont icon-shouji"></i>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="7" :offset="1">
                  <div class="code"></div>
              </el-col>
            </el-row>

            <el-button @click="handleLogin" type="primary" class="mt20">Go Go Go</el-button>

          </el-form-item>
        </el-form>
        </div>
      </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
// 在组合式api当中实现 导航式编程
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus';
// 从element导入表单类型校验
const router = useRouter();// router就等于配置api当中的 this.$router

interface Userinfo {
  uname: string,
  pwd: string,
  code: string
}
const userinfo = reactive<Userinfo>({
  uname: 'test123',
  pwd: '44123',
  code: '123456',
});
// 表单验证
const rules = reactive<FormRules>({
  uname: [
    { required: true, message: '用户名必须写', trigger: 'blur' },
    { min: 5, message: '用户名不能少于5歌字符', trigger: 'blur' },
  ],
  pwd: [
    { required: true, message: '密码必须填写', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '验证码必填', trigger: 'blur' },
    { len: 6, message: '验证码必须是6位', trigger: 'blur' },
  ],
});
const myForm = ref<FormInstance>();
const handleLogin = async () => {
  console.log('userinfo', userinfo);
  (myForm.value as FormInstance).validate((isValid, invalidFields) => {
    console.log('检验的结果是', isValid);
    console.log('没有通过检验的字段是', invalidFields);
    if (isValid) {
      // 跳转
      // router.replace('/index');
      router.replace({
        name: 'home',
        query: {
          user: userinfo.uname,
          a: 123,
        },
      });
    }
  });
};
</script>
<script lang="ts">
export default {
  name: 'longPage',
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 900px)   {
  .loginpage {
    width: 100vw;
    height: 100vh;
    display: flex;
    .bg{
      width: 50vw;
      background: blue;
    }
    .loginzone{
      width: 50vw;
      background: #fff;
      padding:20px;
    }
  }
}

@media screen and (max-width: 900px)   {
  .loginpage {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: blue;
    .bg{
      display: none;
     }
    .loginzone{
      width: 50vw;
      height: 60vh;
      min-width: 495px;
      padding:20px;
      background: #fff;
    }
  }
}
.loginzone{
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginbox{
  width:  500px;
  height: 460px;
}
.code {
  height: 40px;
  border: 1px solid #000;
}
.mt20{
  margin-top: 20px;
  width: 268px;
}
</style>
